<template>
<!-- 	<view class="status_bar">
	           
	</view>
	<view class="box-bg">
		<uni-nav-bar shadow left-icon="left" style="margin-top: 40rpx;"  leftText="返回" rightText="新建待办" title="待办列表" @clickLeft="topLeftClick()" @clickRight="topRightClick()" />
	</view> -->
	&nbsp;
								<uni-easyinput  placeholder="请输入笔记分类名称" />&nbsp;
								<button type="primary" size="default" @click="add">新增</button>
						&nbsp;
	<uni-table border stripe emptyText="暂无更多数据" >
		<!-- 表头行 -->
		<uni-tr>
			<uni-th align="center">笔记分类名称</uni-th>
			<uni-th align="center">操作</uni-th>
		
		</uni-tr>
		<!-- 表格数据行 -->
		<uni-tr>
		
			<uni-td  align="center">个人</uni-td>
			<uni-td  align="center"><button type="primary" size="mini" @click="add">修改</button>&nbsp;<button type="primary" size="mini" @click="add">删除</button></uni-td>
		</uni-tr>
		<uni-tr>
			
		<uni-td  align="center">分享</uni-td>
			<uni-td  align="center"> <button type="primary" size="mini" @click="add">修改</button>&nbsp;<button type="primary" size="mini" @click="add">删除</button></uni-td>
		
		</uni-tr>
	
	</uni-table>
			
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	export default {
		
		computed:{
			
			doingList(){
				
				return store.state.todo.doingList
			},
			doneList(){
				return store.state.todo.doneList
			},
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
			components: {},
			onLoad() {
				//加载新闻通知数据
				store.dispatch('loadTodoData',{})
				// uni.startPullDownRefresh();
			},
			data() {
				return {
					items: ['进行中', '已完成'],
									styles: [{
											value: 'button',
											text: '按钮',
											checked: true
										},
										{
											value: 'text',
											text: '文字'
										}
									],
									colors: ['#007aff', '#4cd964', '#dd524d'],
									current: 0,
									colorIndex: 0,
									activeColor: '#007aff',
									styleType: 'button',
					status: 'more',
									statusTypes: [{
										value: 'more',
										text: '加载前',
										checked: true
									}, {
										value: 'loading',
										text: '加载中',
										checked: false
									}, {
										value: 'noMore',
										text: '没有更多',
										checked: false
									}],
									contentText: {
										contentdown: '查看更多',
										contentrefresh: '加载中',
										contentnomore: '没有更多'
									},
				
					extraIcon:{
						color: '#4cd964',
						size: '22',
						type: 'gear-filled'
					},
					title: 'uni-fab',
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#007AFF',
						buttonColor: '#007AFF',
						iconColor: '#fff'
					},
					is_color_type: false,
				}
			},
			methods: {
				clickItem(item){
					let itemInfo = ['完成', '修改', '删除']
					uni.showActionSheet({
					         
					            itemList: itemInfo,
					            // itemColor: "#ff00ff",
					            success: (e) => {
					          
								  switch(e.tapIndex){
									case 0:
										store.dispatch('addTodoData',{"id":item.id,"status":1}).then(() => {
										
										
											uni.showToast({
											  title: "待办已完成",
											  icon: "none"
											})
										})
										
										break;
									case 1:
										uni.navigateTo({
											url:"/pages/todo/createTodo?id="+item.id+"&context="+item.context+"&comment="+item.comment+"&endTime="+item.endTime
										})
										
										break;
									case 2:
										store.dispatch('addTodoData',{"id":item.id,"validFlag":0}).then(() => {
										
										
											uni.showToast({
											  title: "待办已删除",
											  icon: "none"
											})
										})
										break;
									case 3:
										
										break;
								  }
					              
					            },
					            fail: (e) => {
					              if(this.showErrorToast){
					                uni.showToast({
					                  title: e.errMsg,
					                  icon: "none"
					                })
					              }
					              console.log(e);
					            }
					          })
					
				},
				trigger(e) {
					this.toolsContent[e.index].active = !e.item.active
					store.dispatch('toolsJump',e.item.value)
				},
				onClickItem(e) {
								if (this.current !== e.currentIndex) {
									this.current = e.currentIndex
								}
							},
							styleChange(e) {
								if (this.styleType !== e.detail.value) {
									this.styleType = e.detail.value
								}
							},
							colorChange(e) {
								if (this.styleType !== e.detail.value) {
									console.log(e.detail.value);
									this.activeColor = e.detail.value
								}
							},
				onClick(e){
					console.log(e)
				},
				actionsClick(text){
					uni.showToast({
						title:text,
						icon:'none'
					})
				},
				onChange(e) {
					this.status = e.detail.value
				},
				clickLoadMore(e) {
					uni.showToast({
						icon: 'none',
						title: "当前状态：" + e.detail.status
					})
				},
				
				topRightClick(){
					uni.redirectTo({
						url:"/pages/todo/createTodo"
					})
				},
			}
		}
</script>

<style>
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}
</style>